// pinia store for layout
/**
 * Layout Store
 * @description 有关于布局内的store操作皆来源于当前文件
 * @use 使用方法： useLayoutStore().toggleTopMenus({ path: to.path })
 */
import { goRouter, getRouterObj } from "@/utils";
import { defineStore } from "pinia";
import { ref } from "vue";
import { RouteTabBarEnum, MenuInfoEnum, MenuDefaultConfig } from "@/enums";
import { RouteLocationNormalized } from "vue-router";
import { NormalMenuInfo } from "@/types/menu";

interface Params {
  val?: boolean;
  path?: string;
}

export const useLayoutStore = defineStore("layout", () => {
  const topMenus = ref<boolean>(true); // 是否为顶级菜单布局
  const activeMenu = ref<string>(MenuDefaultConfig.ACTIVE_MENU); // 当前选中的顶级菜单
  const normalMenuName = ref<string>(MenuDefaultConfig.NORMAL_MENU_NAME); // 二级layout路由title
  const normalMenuInfo = ref<NormalMenuInfo>(MenuInfoEnum);
  const normalMenuNameSetting = ref<string>(
    MenuDefaultConfig.NORMAL_MENU_NAME_SETTING
  ); // 二级layout路由title. 1\使用二级路由title. 2\使用当前app卡片title

  // 切换顶部菜单显示隐藏
  const toggleTopMenus = (params: Params) => {
    let routePath = params.path;
    setDefaultRoute(routePath);
    // 顶级菜单列表 =　tabBar
    let topMenuList = RouteTabBarEnum.TABBAR;
    if (!params) {
      return;
    }
    if (typeof params.val === "boolean") {
      topMenus.value = params.val;
      return;
    }
    // 根据路由路径，更新layout-store的顶级菜单状态
    // console.log("根据路由路径，更新layout-store的顶级菜单状态");
    // 对路由path进行解析 .split("/")[1]
    let routePathSplit = routePath.split("/");
    let topRoutePath = routePathSplit[1];
    if (topMenuList.includes(topRoutePath) && routePathSplit.length > 2) {
      topMenus.value = false;
      setNormalMenuName(routePath); // 以路由信息为准
      return;
    }
    topMenus.value = true;
  };
  const clickTopMenu = (name: string) => {
    activeMenu.value = name;
    switch (name) {
      case "exploreApps":
        // 探索
        goRouter("/exploreApps");
        break;
      case "studioApps":
        // 工作室
        goRouter("/studioApps");
        break;
      case "knowledgeApps":
        // 知识库
        goRouter("/knowledgeApps");
        break;
      case "toolsApps":
        // 工具
        goRouter("/toolsApps");
        break;

      default:
        console.error("Unknown menu name");
        break;
    }
  };

  // 根据路由，设定默认选中菜单
  const setDefaultRoute = (routePath: string) => {
    let routeName = routePath.split("/")[1];
    switch (routeName) {
      case "exploreApps":
        activeMenu.value = "exploreApps";
        break;
      case "studioApps":
        activeMenu.value = "studioApps";
        break;
      case "knowledgeApps":
        activeMenu.value = "knowledgeApps";
        break;
      case "toolsApps":
        activeMenu.value = "toolsApps";
        break;
      default:
        break;
    }
  };
  /**
   * 设置二级layout路由-菜单名称
   * @param name
   */
  const setNormalMenuName = (routePath: string) => {
    // console.log("根据路由地址匹配路由，并获取路由配置", routePath);
    if (normalMenuNameSetting.value === "1") {
      const routeObj: RouteLocationNormalized = getRouterObj(routePath);
      // console.log("查看当前路由信息对象", routeObj);
      normalMenuName.value =
        (routeObj.meta.title as string) || (routeObj.name as string);
    } else {
      normalMenuName.value = normalMenuInfo.value.title;
    }
  };

  /**
   * 更新二级layout路由信息对象
   * @param param
   */
  const setNormalMenuInfo = (param: NormalMenuInfo) => {
    // console.log("更新二级layout路由信息对象", param);
    normalMenuInfo.value = { ...normalMenuInfo.value, ...param };
  };
  return {
    topMenus,
    activeMenu,
    normalMenuName,
    normalMenuInfo,
    clickTopMenu,
    setDefaultRoute,
    toggleTopMenus,
    setNormalMenuName,
    setNormalMenuInfo,
  };
});
